<%--
    @Description： 明细
    @Author： 樊双峰
    @Date： 2018-12-19 14:46
--%>
<style type="text/css">
tr, th, td {
    text-align: center;
}
</style>
<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="${request.getContextPath()}/Spc/spcDetail" method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="Excel"/>
            <label>SPC任务<strong><span class="text-danger"></span></strong>：</label>
            <g:textField name="spcName" data-rule="required" value="${spcName}" size="17" readonly="readonly"/>&nbsp;
            <label>采集项<strong><span class="text-danger"></span></strong>：</label>
            <g:textField name="itemName" data-rule="required" value="${itemName}" size="17" readonly="readonly"/>&nbsp;
            <label>客户：</label>
            <g:textField name="customName" value="${customName}" size="17" placeholder="客户"/>&nbsp;
            <label>装置：</label>
            <g:textField name="deviceName" value="${deviceName}" size="17" placeholder="装置"/>&nbsp;
            <label>部件：</label>
            <g:textField name="partName" value="${partName}" size="17" placeholder="部件"/>&nbsp;
            <br/><br/>
            <label>刻印号：</label>
            <g:textField name="markNum" value="${markNum}" size="17" placeholder="刻印号"/>&nbsp;
            <label>开始时间<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="startTime" class="form-control" data-rule="required"
                   data-toggle="datepicker" data-pattern="yyyy-MM-dd HH:mm:ss"
                   size="18" id="start-date-input" readonly value="${startTime}"/>&nbsp;
            <label>结束时间<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="endTime" class="form-control" data-rule="required"
                   data-toggle="datepicker" data-pattern="yyyy-MM-dd HH:mm:ss"
                   size="18" id="end-date-input" readonly value="${endTime}" />&nbsp;
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
            <button type="button" class="btn-blue"
                    onclick="javascript:bjuiExportExl('#pagerForm', '${request.getContextPath()}/Spc/exportExcel')"
                    data-icon="file-excel-o" title="导出Excel">导出</button>
            <g:hiddenField name="xBarUCL" value="${xBarUCL}"/>
            <g:hiddenField name="xBarCL" value="${xBarCL}"/>
            <g:hiddenField name="xBarLCL" value="${xBarLCL}"/>
            <g:hiddenField name="sigmaUCL" value="${sigmaUCL}"/>
            <g:hiddenField name="sigmaCL" value="${sigmaCL}"/>
            <g:hiddenField name="sigmaLCL" value="${sigmaLCL}"/>
            <g:hiddenField name="rangeUCL" value="${rangeUCL}"/>
            <g:hiddenField name="rangeCL" value="${rangeCL}"/>
            <g:hiddenField name="rangeLCL" value="${rangeLCL}"/>
        </div>
    </form>
</div>
<div class="bjui-pageContent tableContent">
    <div style="margin:0px auto; width:96%;">
        <div class="row" style="padding: 0px 0px;">
            <div class="col-md-12">
                <g:if test="${spcByFirstDataList.size() > 0}">
                    <table id="data" data-toggle="tablefixed" data-width="100%" data-nowrap="true">
                        <thead>
                        <tr>
                            <th width="50">NO.</th>
                            <th width="130">采集项</th>
                            <g:each in="${spcByFirstHeadList}" status="i" var="headInstance">
                                <th width="170">${headInstance.ITEM_TIME}</th>
                            </g:each>
                        </tr>
                        </thead>
                        <tbody>
                        <g:each in="${spcByFirstDataList}" status="i" var="dataInstance">
                            <tr>
                                <td>${i + 1}</td>
                                <td>${dataInstance.ITEM_NAME}</td>
                                <g:each in="${spcByFirstHeadList}" status="j" var="headInstance">
                                    <td>${dataInstance[headInstance.ITEM_TIME]}</td>
                                </g:each>
                            </tr>
                        </g:each>
                        </tbody>
                    </table>
                </g:if>
                <g:else>
                    <g:render template="../template/emptyPanel"/>
                </g:else>
            </div>
        </div>
    </div>
    <g:if test="${spcByFirstXbarChart.size() > 0}">
        <div style="width:96%;height:450px;margin:20px auto" id="spcByFirstXbarChart"></div>
    </g:if>
    <g:if test="${spcByFirstRangeChart.size() > 0}">
        <div style="width:96%;height:450px;margin:20px auto" id="spcByFirstRangeChart"></div>
    </g:if>
    <g:if test="${spcByFirstHeadList.size() > 0}">
        <div style="width:96%;height:450px;margin:20px auto" id="spcByFirstSigmaChart"></div>
    </g:if>
</div>
<g:render template="../template/echarts" />
<script type="text/javascript">
    /*
      Xbar
     */
    var spcByXbarChart = function() {
        var dom = document.getElementById("spcByFirstXbarChart");
        var myChart = echarts.init(dom);
        var dateList = [];
        var xBarList = [];
        <g:each in="${spcByFirstXbarChart}" status="i" var="dataInstance">
            dateList.push('${dataInstance.ITEM_TIME}');
            xBarList.push(${dataInstance.AVGS});
        </g:each>
        var option = {
            title: {
                text: 'X-bar'
            },
            legend: {
                data: ['Xbar']
            },
            tooltip : {
                trigger: 'axis'
            },
            toolbox: {
                show : true,
                feature : {
                    saveAsImage : {show: true}
                }
            },
            xAxis: {
                name: '时间',
                show: true,
                type: 'category',
                data: dateList,
                axisLabel: {
                    rotate: 20,
                    show: true,
                    textStyle: {
                        color: '#3A82B9'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#3A82B9',
                        width: 2
                    }
                }
            },
            yAxis: [
                {
                    type: 'value',
                    show: true,
                    name: '数值',
                    min: ${xBarMin - 1},
                    max: ${xBarMax + 1},
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#3A82B9',
                            width: 2
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#3A82B9'
                        }
                    },
                    splitLine: {
                        show: true
                    },
                    splitArea: {
                        show: false
                    }
                }
            ],
            series: [
                {
                    name: 'Xbar',
                    data: xBarList,
                    type: 'line',
                    markLine : {
                        data: [
                            {
                                yAxis: ${xBarUCL},
                                label: {
                                    normal: {
                                        formatter: 'UCL\t${xBarUCL}'
                                    }
                                },
                                lineStyle: {
                                    normal: {
                                        color: '#ff0000',
                                        width: 1
                                    }
                                }
                            },
                            {
                                yAxis: ${xBarCL},
                                label: {
                                    normal: {
                                        formatter: 'CL\t${xBarCL}'
                                    }
                                },
                                lineStyle: {
                                    normal: {
                                        color: '#00ff00',
                                        width: 1
                                    }
                                }
                            },
                            {
                                yAxis: ${xBarLCL},
                                label: {
                                    normal: {
                                        formatter: 'LCL\t${xBarLCL}'
                                    }
                                },
                                lineStyle: {
                                    normal: {
                                        color: '#ffcc00',
                                        width: 1
                                    }
                                }
                            }
                        ]
                    },
                    itemStyle: {
                        normal: {
                            color: '#D53A35',
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: '#000'
                                }
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option, true);
    }

    /*
      Range
     */
    var spcByRangeChart = function() {
        var dom = document.getElementById("spcByFirstRangeChart");
        var myChart = echarts.init(dom);
        var dateList = [];
        var rangeList = [];
        <g:each in="${spcByFirstRangeChart}" status="i" var="dataInstance">
            dateList.push('${dataInstance.ITEM_TIME}');
            rangeList.push(${dataInstance.ITEM_DATA});
        </g:each>
        var option = {
            title: {
                text: 'Range'
            },
            legend: {
                data: ['RANGE']
            },
            tooltip : {
                trigger: 'axis'
            },
            toolbox: {
                show : true,
                feature : {
                    saveAsImage : {show: true}
                }
            },
            xAxis: {
                name: '时间',
                show: true,
                type: 'category',
                data: dateList,
                axisLabel: {
                    rotate: 20,
                    show: true,
                    textStyle: {
                        color: '#3A82B9'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#3A82B9',
                        width: 2
                    }
                }
            },
            yAxis: [
                {
                    type: 'value',
                    show: true,
                    name: '数值',
                    max: ${rangeMax + 1},
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#3A82B9',
                            width: 2
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#3A82B9'
                        }
                    },
                    splitLine: {
                        show: true
                    },
                    splitArea: {
                        show: false
                    }
                }
            ],
            series: [
                {
                    name: 'RANGE',
                    data: rangeList,
                    type: 'line',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'black'
                                }
                            }
                        }
                    },
                    markLine : {
                        data: [
                            {
                                yAxis: ${rangeUCL},
                                label: {
                                    normal: {
                                        formatter: 'UCL\t${rangeUCL}'
                                    }
                                },
                                lineStyle: {
                                    normal: {
                                        color: '#ff0000',
                                        width: 1
                                    }
                                }
                            },
                            {
                                yAxis: ${rangeCL},
                                label: {
                                    normal: {
                                        formatter: 'CL\t${rangeCL}'
                                    }
                                },
                                lineStyle: {
                                    normal: {
                                        color: '#00ff00',
                                        width: 1
                                    }
                                }
                            },
                            {
                                yAxis: ${rangeLCL},
                                label: {
                                    normal: {
                                        formatter: 'LCL\t${rangeLCL}'
                                    }
                                },
                                lineStyle: {
                                    normal: {
                                        color: '#ffcc00',
                                        width: 1
                                    }
                                }
                            }
                        ]
                    },
                }
            ]
        };
        myChart.setOption(option, true);
    }

    /*
      Sigma
     */
    var spcBySigmaChart = function() {
        var dom = document.getElementById("spcByFirstSigmaChart");
        var myChart = echarts.init(dom);
        var dateList = [];
        var sigmasUCLList = [];
        var sigmasCLList = [];
        var sigmasLCLList = [];
        <g:each in="${spcByFirstHeadList}" status="i" var="headInstance">
            dateList.push('${headInstance.ITEM_TIME}');
            sigmasUCLList.push(${sigmaUCL});
            sigmasCLList.push(${sigmaCL});
            sigmasLCLList.push(${sigmaLCL});
        </g:each>
        var option = {
            title: {
                text: 'Sigma'
            },
            legend: {
                data: ['UCL','CL','LCL']
            },
            tooltip : {
                trigger: 'axis'
            },
            toolbox: {
                show : true,
                feature : {
                    saveAsImage : {show: true}
                }
            },
            xAxis: {
                name: '时间',
                show: true,
                type: 'category',
                data: dateList,
                axisLabel: {
                    rotate: 20,
                    show: true,
                    textStyle: {
                        color: '#3A82B9'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#3A82B9',
                        width: 2
                    }
                }
            },
            yAxis: [
                {
                    type: 'value',
                    show: true,
                    name: '数值',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#3A82B9',
                            width: 2
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#3A82B9'
                        }
                    },
                    splitLine: {
                        show: true
                    },
                    splitArea: {
                        show: false
                    }
                }
            ],
            series: [
                {
                    name: 'UCL',
                    data: sigmasUCLList,
                    type: 'line',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'black'
                                }
                            }
                        }
                    },
                },
                {
                    name: 'CL',
                    data: sigmasCLList,
                    type: 'line',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'black'
                                }
                            }
                        }
                    },
                },
                {
                    name: 'LCL',
                    data: sigmasLCLList,
                    type: 'line',
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: 'black'
                                }
                            }
                        }
                    },
                }
            ]
        };
        myChart.setOption(option, true);
    }

    $(function(){
        <g:if test="${spcByFirstXbarChart.size() > 0}">
            spcByXbarChart();
        </g:if>
        <g:if test="${spcByFirstRangeChart.size() > 0}">
            spcByRangeChart();
        </g:if>
        <g:if test="${spcByFirstHeadList.size() > 0}">
            spcBySigmaChart();
        </g:if>
    });
</script>